<template>
  <div style="margin-left: 15px;margin-right: 15px">
    <el-descriptions title="" direction="vertical" :column="3" border :labelStyle="{'color':'#000'}">
      <el-descriptions-item label="运营商名称">{{station.operatorName}}<span
        class="appendInfo">{{station.operatorCode}}</span></el-descriptions-item>
      <el-descriptions-item label="站场编号">{{station.chargeStationCode}}</el-descriptions-item>
      <el-descriptions-item label="站场名称">{{station.chargeStationName}}</el-descriptions-item>
      <el-descriptions-item label="场站电话">{{station.chargeStationPhone}}</el-descriptions-item>
      <el-descriptions-item label="场站类型">
        <el-radio-group v-model="station.chargeStationType">
          <el-radio
            disabled
            v-for="dict in dict.type.charge_station_type"
            :key="dict.value"
            :label="dict.value"
          >{{dict.label}}
          </el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="场站状态">
        <el-radio-group v-model="station.chargeStationStatus">
          <el-radio
            disabled
            v-for="dict in dict.type.charge_station_status"
            :key="dict.value"
            :label="dict.value"
          >{{dict.label}}
          </el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item label="车位数量">{{station.parkNum}}</el-descriptions-item>
      <el-descriptions-item label="建筑场所">{{getName(station.buildingSite)}}</el-descriptions-item>
      <el-descriptions-item label="详细地址">{{station.chargeStationAddress}}</el-descriptions-item>
      <el-descriptions-item label="经度">{{station.chargeStationLongitude}}</el-descriptions-item>
      <el-descriptions-item label="纬度">{{station.chargeStationLatitude}}</el-descriptions-item>
      <el-descriptions-item label="国标接口">
        <el-checkbox-group v-model="station.nationalStandardInterface">
          <el-checkbox
            disabled
            v-for="dict in dict.type.national_standard_interface"
            :key="dict.value"
            :label="dict.value">
            {{dict.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item label="辅源电压">
        <el-checkbox-group v-model="station.auxiliarySourceVoltage">
          <el-checkbox
            disabled
            v-for="dict in dict.type.auxiliary_source_voltage"
            :key="dict.value"
            :label="dict.value">
            {{dict.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item label="枪类型">
        <el-checkbox-group v-model="station.gunType">
          <el-checkbox
            disabled
            v-for="dict in dict.type.gun_type"
            :key="dict.value"
            :label="dict.value">
            {{dict.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item label="支付方式">
        <el-checkbox-group v-model="station.paymentMethod">
          <el-checkbox
            disabled
            v-for="dict in dict.type.payment_method"
            :key="dict.value"
            :label="dict.value">
            {{dict.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item label="免费停车">
        <el-checkbox-group v-model="station.paymentMethod">
          <el-radio-group v-model="station.parking">
            <el-radio
              disabled
              v-for="dict in dict.type.parking"
              :key="dict.value"
              :label="dict.value"
            >{{dict.label}}
            </el-radio>
          </el-radio-group>
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item label="营业时间">{{station.chargeStationStartTime}}-{{station.chargeStationEndTime}}
      </el-descriptions-item>
      <el-descriptions-item label="支付渠道">
        <el-checkbox-group v-model="station.paymentChannels">
          <el-checkbox
            disabled
            v-for="dict in dict.type.payment_channels"
            :key="dict.value"
            :label="dict.value">
            {{dict.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item label="价格类型">{{station.priceTypeName}}</el-descriptions-item>
      <!--<el-descriptions-item label="小程序名称">
        <el-radio-group v-model="station.appletName">
          <el-radio
            disabled
            v-for="dict in dict.type.applet_name"
            :key="dict.value"
            :label="dict.value"
          >{{dict.label}}
          </el-radio>
        </el-radio-group>
      </el-descriptions-item>-->
      <el-descriptions-item label="场站设施">
        <el-checkbox-group v-model="station.chargeStationFacilities">
          <el-checkbox
            disabled
            v-for="dict in dict.type.charge_station_facilities"
            :key="dict.value"
            :label="dict.value">
            {{dict.label}}
          </el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
      <el-descriptions-item label="场站评分">{{station.chargeStationScore}}</el-descriptions-item>
      <el-descriptions-item label="场站备注">{{station.chargeStationRemark}}</el-descriptions-item>
      <el-descriptions-item label="创建时间">
        <span>{{ parseTime(station.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="创建者">{{station.createBy}}</el-descriptions-item>
      <el-descriptions-item label="更新时间">
        <span>{{ parseTime(station.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="更新者">{{station.updateBy}}</el-descriptions-item>
      <el-descriptions-item label="场站照片">
        <image-preview v-for="item of imageList" style="margin-right: 15px" :src="item" :width="100" :height="100"/>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>
<script>
  export default {
    name: 'StationDetail',
    dicts: ['gun_type', 'charge_station_type', 'charge_station_status', 'national_standard_interface', 'payment_method', 'auxiliary_source_voltage', 'payment_channels', 'applet_name', 'parking', 'charge_station_facilities', 'building_site'],
    data() {
      return {
        imageList: [],
        reqFileUrl: 'https://www.sdzctech.cn',
      }
    },
    props: {
      station: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
    watch: {
      station: {
        handler() {
          let photo = []
          if(this.station.chargeStationPhoto != null && this.station.chargeStationPhoto != undefined && this.station.chargeStationPhoto != ''){
            let split = this.station.chargeStationPhoto.split(',')
            split.forEach(item => {
              photo.push(this.reqFileUrl + item)
            })
          }
          this.imageList = photo

        },
        deep: true
      }
    },
    methods:{
      getName(id) {
        return this.selectDictLabel(this.dict.type.building_site,id)
      },
    }
  }
</script>

<style scoped>
  .appendInfo {
    color: #bdbdbd;
    padding-left: 10px;
  }
</style>
